<template>
    <div>
        <el-row class="layout-page-heading">
            <el-col :span="16">
                <h3>基础管理</h3>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>基础管理</el-breadcrumb-item>
                    <el-breadcrumb-item>商户统计</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>

        </el-row>
        <div class="layout_chart" id="financeChart" style="width: 800px;height:500px;"></div>
        <div class="layout-page-box">
            <el-form label-width="160px" label-position="right" :model="agent" :rules="rules" ref="agent" class="search-form">
                <el-form-item label="总借款次数：" prop="principal">
                    {{agent.apply_count}}
                </el-form-item>
                <el-form-item label="借还款比例：" prop="mobile">
                    {{agent.apply_repay_rate*100}}%
                </el-form-item>
                <el-form-item label="平均贷款期：" prop="domain1">
                    {{agent.mean_apply_duration}}天
                </el-form-item>
                <el-form-item label="总还款比率：">
                    {{agent.repaid_rate*100}}%
                </el-form-item>
                 <el-form-item label="统计时间 ：">
                    {{agent.stat_time}}
                </el-form-item>               
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                agent: {
                    apply_amount: 0,
                    loan_amount: 0,
                    repaid_amount: 0,
                    to_repay_amount: 0,
                    to_repay_overdue: 0,
                    mean_apply_amount: 0,

                    apply_count:0,
                    apply_count:0,
                    apply_count:0,
                    apply_count:0,
                }
            }
        },
        mounted() {
            this.initCharts();
        },
        methods: {
            initCharts() {
                this.financeChart = echarts.init(document.getElementById("financeChart"));
                this.chart2
                this.setFinanceOptions();
            },
            setFinanceOptions() {
                if (this.agent.apply_amount) {
                    this.financeChart.setOption({
                        title: {
                        text: '财务数据'
                    },
                    tooltip: {},
                    xAxis: {
                        data: ["总借款","实际放款","已还款","待收欠款","逾期待收","均贷款"]
                    },
                    yAxis: {},
                    series: [{
                        name: '金额',
                        type: 'bar',
                        itemStyle: {
                             normal: {
                        color: function(params) {
                            var colorList = [
                              '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{b}\n{c}'
                        }

                    }

                },
                        data: [this.agent.apply_amount/1000,
                            this.agent.loan_amount/1000,
                            this.agent.repaid_amount/1000,
                            this.agent.to_repay_amount/1000,
                            this.agent.to_repay_overdue/1000,
                            this.agent.mean_apply_amount/1000]
                        }]
                })
                }
                else
                {
                                        this.financeChart.setOption({
                        title: {
                        text: '财务数据'
                    },
                    tooltip: {},
                    xAxis: {
                        data: ["总借款","实际放款","已还款","待收欠款","逾期待收","均贷款"]
                    },
                    yAxis: {},
                    series: [{
                        name: '金额',
                        type: 'bar',
                        data: [0,0,0,0,0,0]
                        }]
                })
                }

            },
            query(){
                var query = this.$route.query.__query
                if (query) {
                    Object.assign(this.filters, JSON.parse(query));
                }

                var queries = {
                    tenant_id: this.$route.query.id
                }

                api.request('stat/statBase', queries, 'POST').then((res) => {
                    this.agent = res.data;
                    this.setFinanceOptions();
                })
            }
        },
        created() {
            this.query()
        }
    }
</script>

<style scoped>


</style>

